import React, { Component } from 'react';
import { Avatar, List, Space, TabBar,Button  } from 'antd-mobile'
import { BankcardOutline, TextOutline, FileWrongOutline, FileOutline, RightOutline } from 'antd-mobile-icons'
import '../../styles/mine.scss'
class Mine extends Component {
    constructor(props){
        super(props)
        this.state = {
            
            navlist: [
                {title:'待付款',icon:<BankcardOutline />},
                {title:'待发货',icon:<FileWrongOutline />},
                {title:'已发货',icon:<FileOutline />},
                {title:'待评价',icon:<TextOutline />},
            ],
            token:localStorage.getItem('token')
        }
    }
    jump() {
        this.props.history.push('/colloction')
    }
    jumpTo() {
        this.props.history.push('/login') 
    }
    render() {
        return (
            <div className='mine'>
                <div className='mine-header'>
                <Space block direction='vertical'>
          <Avatar src='' style={{ '--size': '64px' }}/>
       
                    </Space>
                    <span>名字</span>
                </div>
                <div className='mine-main'>
                    <ul>
                        <li onClick={()=>{this.jump()}}><span>1</span>
                        <p>收藏</p></li>
                        <li><span>0</span>
                        <p>积分</p></li>
                        <li><span>0</span>
                        <p>优惠券</p></li>
                    </ul>
                </div>
                <div className='mine-list'>
                    <p>我的订单 <span>查看全部订单  <RightOutline /></span></p>
                    
                  
                    <TabBar>
          {this.state.navlist.map((item,index) => (
            <TabBar.Item key={index} icon={item.icon} title={item.title} fontSize={36}/>
          ))}
           </TabBar>

       
                </div>
                <p className='huiyuan'>会员中心<RightOutline /></p>
                <List>
        <List.Item>领劵中心 <RightOutline /></List.Item>
        <List.Item>我的评价 <RightOutline /></List.Item>
        <List.Item>收货地址 <RightOutline /></List.Item>
        <List.Item>我的客服 <RightOutline /></List.Item>
                </List>
                <div className='btn-box'>
                    {
                       this.state.token? <Button block shape='rounded' color='primary' onClick={()=>{this.jumpTo()}}>
                        退出登录
                            </Button>: <Button block shape='rounded' color='primary' onClick={()=>{this.jumpTo()}}>
                登录
                    </Button>
                    }
               
                    </div>
            </div>
        );
    }
}

export default Mine;